{extend name="public:base"}
{block name='css'}
<link href="__PUBLIC__/css/plugins/iCheck/custom.css" rel="stylesheet">
{/block}
{block name='body'}
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>{empty name='date'}添加{else/}修改{/empty}分类</h5>
                    <a href="{:url('cate')}" class="btn btn-sm btn-primary pull-right m-t-n-xs">返回</a>
                </div>
                <div class="ibox-content">
                    <form method="post" class="form-horizontal" id="commentForm" onsubmit="return false;" action="" >
                        <input type="hidden" name="id" value="{$data.id|default=''}">

                        <div class="form-group">
                            <label class="col-sm-2 control-label">分类名称</label>
                            <div class="col-sm-8">
                                <input type="text" name="title" value="{$data.title|default=''}" placeholder="请输入分类名称" class="input-sm form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">上级分类</label>
                            <div class="col-sm-8">
                                <select class="input-sm form-control" name="pid">
                                    <option value="0">顶级分类</option>
                                    {foreach name="list" item="li"}
                                    <option value="{$key}" {if condition="isset($data.type) && $data.type eq $key"}selected{/if}>{$li}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">分类图</label>
                            <div class="col-sm-10">

                                <div class="col-sm-12 imgKj"  style="padding-left:0px;">
                                    <div class="img_info">
                                        <img src="{$data.img|default='__PUBLIC__/img/goods.jpg'}" id="up_1" width="100"/>
                                        <input type="hidden" name="img" class="i" value="{$data.img|default=''}" />
                                        <input class="i" id="inp_1" type="file" accept="image/gif,image/jpeg,image/jpg,image/png"/>
                                    </div>
                                </div>


                                <div class="col-sm-12"  style="padding-left:0px;">
                                    <span class="help-block m-b-none">图片大小：200px*200px以上1:1比例图片</span>
                                </div>
                            </div>
                        </div>
                        <style type="text/css">
                            .img_info{width:104px;height:auto;overflow:hidden;position:relative;margin:0px 10px 10px 0px;float:left;}
                            .img_info img{width:100px;height:100px;border:1px solid #ccc;padding:1px;}
                            .img_info input.i{width:100px;height:100px;left:0px;top:0px;opacity:0;position:absolute;z-index:1;cursor:pointer;padding:0px;margin:0px;}
                            .img_info p{width:100px;height:22px;}
                            .img_info p input{position:relative;width:100%;height:100%;border:1px solid #ccc;}
                            .img_info span{display:inline-block;width:100%;height:22px;line-height:22px;text-align:center;cursor:pointer;}
                        </style>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">排序</label>
                            <div class="col-sm-8">
                                <input type="number" name="sort" value="{$data.sort|default=''}" placeholder="请输入排序值" class="input-sm form-control">
                            </div>
                        </div>


                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <input class="btn btn-primary" type="submit" value="保存内容" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
{/block}
{block name="js"}

<script src="__PUBLIC__/js/content.min.js?v=1.0.0"></script>
<script src="__PUBLIC__/js/plugins/validate/jquery.validate.min.js"></script>
<script src="__PUBLIC__/js/plugins/validate/messages_zh.min.js"></script>
<script type="text/javascript">
    $.validator.setDefaults({
        highlight: function(e) {
            $(e).closest(".form-group").removeClass("has-success").addClass("has-error")
        },
        success: function(e) {
            e.closest(".form-group").removeClass("has-error").addClass("has-success")
        },
        errorElement: "span",
        errorPlacement: function(e, r) {
            e.appendTo(r.is(":radio") || r.is(":checkbox") ? r.parent().parent().parent() : r.parent())
        },
        errorClass: "help-block m-b-none",
        validClass: "help-block m-b-none"
    });
    $().ready(function() {
        var e = "<i class='fa fa-times-circle'></i> ";
        $("#commentForm").validate({
            rules: {
                title: "required"
            },
            messages: {
                title: e + '请输入分类名称'
            },
            submitHandler: function(form){
               if ($(form).hasClass('ed')) {
                   return false;
               }

               if ($('select[name=pid]').val() > 0 && $('input[name=img]').val() == '') {
                   layer.msg('请上传分类图片');return false;
               }

                $(form).addClass('ed');
                $.post("{:url('cate_save')}", $(form).serialize(), function(data){
                    layer.msg(data.info);
                    if (data.status == 'y') {
                        setTimeout(function(){window.location.href = '{:url("cate")}';},1500);
                    } else {
                        $(form).removeClass('ed');
                    }
                }, 'json');
            },
            invalidHandler: function(form, validator) {  //不通过回调
                return false;
            }
        })
    });

    $(function(){
        $('#inp_1').change(function(event) {
            var self = this;
            var files = event.target.files || event.dataTransfer.files;
            var formData = new FormData();
            formData.append('imgFile', files[0]);
            var ajax = new XMLHttpRequest();
            ajax.open("POST", "{:url('index/Index/saveImg')}", true);
            ajax.send(formData);
            ajax.onreadystatechange = function() {
                if (ajax.readyState == 4) {
                    if (ajax.status >= 200 && ajax.status < 300 || ajax.status == 304) {
                        var data = JSON.parse(ajax.responseText);
                        if (data.status == 'y') {
                            $(self).prev().val(data.data.src);
                            $(self).prev().prev().attr('src', data.data.src);
                        } else {
                            layer.msg(data.info);
                        }
                    }
                }
            }
        });


    });

</script>
{/block}
